<!-- myNotify -->
<template>
        <!-- 卡片 -->
        <!-- <el-card class="box-card el-card-flex"> -->
            <!-- 表格 -->
            <div style="height:100%">
                <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
                    <el-form-item style="float:right">
                        <el-button type="primary" @click='handleTaskAdd()' plain>
                            新增设备
                            <i class="el-icon-plus"></i>
                        </el-button>
                    </el-form-item>
                </el-form>
                <div class="el-flex el-box-column" style="clear: both;height:90%;">
                    <el-table border height="100%" :data="tableData" stripe  ref="firstTale">
                        <!-- <el-table-column prop="order" align="center" label="排序" width='100px'>
                            <template slot-scope="scope">
                            <el-button class="td-btn-icon" type="text" @click="handleUp(scope.$index, scope.row)"><i class="el-icon-top"></i></el-button>
                            <el-button class="td-btn-icon" type="text" @click="handleDown(scope.$index, scope.row)"><i class="el-icon-bottom"></i></el-button>
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="deviceName" min-width="150px" label="设备名称" align="left" sortable
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="deviceDesc" min-width="120px" label="备注" align="left" sortable
                        show-overflow-tooltip></el-table-column>
                        <el-table-column prop="control" align="center" label="操作" width='110px'>
                            <template slot-scope="scope">
                                <el-button class="td-btn-icon" type="text" title="编辑" @click='handleTaskEdit(scope.$index, scope.row)' icon="el-icon-edit"></el-button>
                                <el-button class="td-btn-icon" type="text" title="删除" @click.native.prevent="deleteRow(scope.$index, scope.row)" icon="el-icon-delete"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <el-pagination style="background: #fff; height: 32px; padding-top: 11px;left: 7px;" class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    background :current-page="currentPage" :page-sizes="[20, 25, 30, 35]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination> -->
                </div>
                <el-dialog
            :title="dialogAppTitle"
            :visible.sync="dialogAppVisible"
            :before-close="handleClose" 
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="30%"
            >
                <el-form ref="formData" label-width="100px" :model="formData">
                    <el-form-item label="设备名称:" prop="deviceName" :rules="[{required: true,message: '请输入设备名称'}]">
                        <el-col :span="20">
                            <el-input v-model="formData.deviceName" placeholder="最多可输入20字" auto-complete="off"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="备注:" prop="deviceDesc">
                        <el-col :span="20">
                            <el-input type="textarea" :rows="3" v-model="formData.deviceDesc" placeholder="备注"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="handleCheck('formData')">
                    确定
                    <!-- <i class="el-icon-document-checked el-icon--right"></i> -->
                    </el-button>
                    <el-button @click="handleClose('formData')">
                    取消
                    <!-- <i class="el-icon-refresh-left"></i> -->
                    </el-button>
                </span>
            </el-dialog>
            </div>
            
        <!-- </el-card> -->
    </template>
    <script>
        import {
            Tree,
            Dialog,
            Table,
            TableColumn,
            Pagination,
            MessageBox,
            Message,
            Tag,
            Upload,
            Drawer
        } from 'element-ui';
        import {
            taskList, //列表数据
        } from '@/api/missionCenter/missionCenter.js'
        import {
            deviceList, //设备数据
            addDevice, //新增设备
            getDevice, //获取设备详情
            upDevice, //修改设备
            delDevice, //删除设备
        } from '@/api/conference/Initialize.js'
        export default {
            name: 'location',
            components: {
            'el-tree': Tree, //树形菜单
            'el-dialog': Dialog, //对话框
            'el-table': Table, //表格
            'el-table-column': TableColumn, //表格列
            'el-pagination': Pagination, //分页
            'el-tag': Tag, //标签
            'el-upload': Upload,
            'el-drawer': Drawer
            },
            data() {
                return {
                    pageSize: 20,
                    total: 0,
                    currentPage: 1,
                    tableData:[],
                    dialogAppVisible: false,
                    dialogAppTitle:'新增设备',
                    formData:{
                        deviceId:'',
                        deviceName: '',
                        deviceDesc:''
                    }
                };
            },
            
            created() {
                this.getTabTree()
                window.onresize = () => {
                    this.$refs.tableData.doLayout()
                }
            },
            methods: {
                getTabTree(){
                  deviceList({}).then(res => {
                    if(res.data.code == 10000){
                      this.tableData = res.data.data.records
                    //   this.total = res.data.data.total
                    }
                  }).catch(res => {
                    resolve([])
                  })
                },
                //新增
                handleTaskAdd(){
                    this.dialogAppVisible = true;
                    this.dialogAppTitle = '新增设备'
                },
                //编辑
                handleTaskEdit(index,row){
                    this.dialogAppVisible = true;
                    this.dialogAppTitle = '编辑设备'
                    getDevice(row.deviceId).then((res)=>{
                        if(res.data.code == 10000){
                            this.formData = res.data.data
                        }
                    })
                },
                //删除
                deleteRow(index,row){
                    var id = row.deviceId
                    MessageBox.confirm('您是否确定删除选中内容', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        delDevice(id).then(res => {
                        if(res.data.code == 10000){
                            Message({
                            type: 'success',
                            message: '删除成功'
                            });
                             this.getTabTree()
                        }else{
                            // Message({
                            //     type: 'error',
                            //     message: res.data.msg
                            // });
                        }
                        
                        }).catch(res => {
                        
                        })
                    })
                },
                //确定按钮
                handleCheck(formName){
                    this.$refs[formName].validate((valid)=>{
                        if (valid){
                            if(!this.formData.deviceId){
                                addDevice({
                                    deviceName: this.formData.deviceName,
                                    deviceDesc: this.formData.deviceDesc,
                                }).then((res)=>{
                                    if(res.data.code == 10000){
                                        Message({
                                            type: 'success',
                                            message: '新增成功'
                                        });
                                        this.handleClose('formData')
                                        this.getTabTree()
                                    }
                                })
                            }else{
                                upDevice({
                                    deviceName: this.formData.deviceName,
                                    deviceDesc: this.formData.deviceDesc,
                                    deviceId: this.formData.deviceId
                                }).then((res)=>{
                                    if(res.data.code == 10000){
                                        Message({
                                            type: 'success',
                                            message: '修改成功'
                                        });
                                        this.handleClose('formData')
                                        this.getTabTree()
                                        
                                    }
                                })
                            }
                        }
                    })
                },
                handleClose(formName){
                    this.dialogAppVisible = false;
                    this.$refs['formData'].resetFields();
                    this.formData.deviceName = '';
                    this.formData.deviceDesc = '';
                    this.formData.deviceId = '';
                },
                
                handleUp(index, row) { //向上移动
                    // if (index > 0) {
                    // var sortNo = row.sortNo
                    // var temp = this.tableData[index - 1].sortNo
                    // row.sortNo = this.tableData[index - 1].sortNo
                    // if (row.sortNo == this.tableData[index - 1].sortNo) {
                    //     row.sortNo--
                    // }
                    // temp = sortNo
                    // this.axios.post('/employee/' + row.empId + '/' + row.sortNo + '').then(res => {
                    //     this.dataTable(this.headingId)
                    // })
                    // } else {
                    // Message({
                    //     type: 'warning',
                    //     message: '已经是第一条了，不可以上移'
                    // });
                    // }
                },
                handleDown(index, row) { //向下移动
                    // if (index + 1 >= this.tableData.length) {
                    // Message({
                    //     type: 'warning',
                    //     message: '已经是最后一条了，不可以下移'
                    // });
                    // } else {
                    // var sNo = row.sortNo
                    // var temp = this.tableData[index + 1].sortNo
                    // row.sortNo = this.tableData[index - 1].sortNo
                    // if (row.sortNo == temp) {
                    //     row.sortNo++
                    // }
                    // temp = sNo
                    // this.axios.post('/employee/' + row.empId + '/' + row.sortNo + '').then(res => {
                    //     this.dataTable(this.headingId)
                    // })
                    // }
                },
                // handleSizeChange(val) { //每页条数
                //   this.pageSize = val;
                //   this.getTabTree(this.formInline)
                // },
                // handleCurrentChange(val) { //当前页数
                //   this.currentPage = val;
                //   this.getTabTree(this.formInline)
                // },
            }
        };
    </script>
          
<style lang="scss">
    .el-card__body {
        position: relative;
    }
    
    .pagination.el-pagination {
        position: absolute;
        bottom: 5px;
        left: 15px;
    }
    
    .el-form-tag {
        margin-bottom: 8px !important;
    }
    
    .el-form-tag .el-tag {
        margin-bottom: 10px;
        margin-left: 0 !important;
        margin-right: 10px !important;
    }
    .el-input:not(.el-input--suffix) .el-input__inner[readonly]{
        background: none!important;
    }
</style>
          
          